<template>
    <div id="main">
        <el-row>
            <el-col :span="17">
                <el-main>
                    <div class="six-action">

                        <el-col class="six-action-to" :span="8" v-for="(v, i) in act" :key="i" style="margin-bottom: 10px;">
                            <el-col :span="1">
                                <div style="padding: 10px;"></div>
                            </el-col>

                            <el-col :span="22">
                                <el-card style="height: 18vh;cursor: pointer;" shadow="always" @click.native="toMethod(v)">
                                    <div class="act-img">
                                        <el-image :src="v.src"></el-image>
                                    </div>
                                    <div class="act-text">
                                        {{ v.text }}
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="1"></el-col>

                        </el-col>
                    </div>

                    <div class="six-action">
                        <div style="height: 100%;margin: 0px 15px 0 15px;">
                            <el-row>
                                <el-col :span="11" v-if="isStu">
                                    <el-card>
                                        <div slot="header">
                                            <span>各学年综合素质成绩</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart1"
                                                :style="myChartStyle"></div>
                                        </div>


                                    </el-card>
                                </el-col>
                                <el-col :span="2" v-if="isStu">
                                    <div style="margin: 1px;">

                                    </div>
                                </el-col>


                                <el-col :span="11" v-if="isStu">
                                    <el-card>
                                        <div slot="header">
                                            <span>综合素质成绩倾向情况</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart2"
                                                :style="myChartStyle"></div>
                                        </div>

                                    </el-card>
                                </el-col>


                                <el-col :span="11" v-if="is_fdy">
                                    <el-card>
                                        <div slot="header">
                                            <span>更多功能，敬请期待</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart3"
                                                :style="myChartStyle"></div>
                                        </div>


                                    </el-card>
                                </el-col>
                                <el-col :span="2" v-if="is_fdy">
                                    <div style="margin: 1px;">

                                    </div>
                                </el-col>


                                <el-col :span="11" v-if="is_fdy">
                                    <el-card>
                                        <div slot="header">
                                            <span>更多功能，敬请期待</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart4"
                                                :style="myChartStyle"></div>
                                        </div>

                                    </el-card>
                                </el-col>

                                <el-col :span="11" v-if="is_jwc">
                                    <el-card>
                                        <div slot="header">
                                            <span>更多功能，敬请期待</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart5"
                                                :style="myChartStyle"></div>
                                        </div>


                                    </el-card>
                                </el-col>
                                <el-col :span="2" v-if="is_jwc">
                                    <div style="margin: 1px;">

                                    </div>
                                </el-col>


                                <el-col :span="11" v-if="is_jwc">
                                    <el-card>
                                        <div slot="header">
                                            <span>更多功能，敬请期待</span>
                                        </div>
                                        <div style="width: 100%;height: 300px;">
                                            <div style="position: relative;top: -20px;" class="echart" id="mychart6"
                                                :style="myChartStyle"></div>
                                        </div>

                                    </el-card>
                                </el-col>

                            </el-row>

                        </div>
                    </div>
                </el-main>
            </el-col>

            <el-col :span="6">
                <el-main style="padding: 0;">

                    <el-card style="margin-top: 20px;height:30vh;" shadow="always">
                        <div slot="header">
                            <span>快捷功能</span>
                        </div>
                        <div style="height: 22vh;position: relative;">
                            <el-col :span="6" style="text-align: center;" v-for="(v, i) in fast" :key="i">
                                <div style="width: 100%;height:11vh;" class="fast-act">
                                    <el-image :src="v.src"
                                        style="position: relative;width: 44.917px;height: 44px;"></el-image>
                                    <div style="font-size: 14px;position: relative;top: -5px;">{{ v.text }}</div>
                                </div>
                            </el-col>
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;height: 14vh;" shadow="always">
                        <div slot="header">
                            <span>提醒消息</span>
                        </div>
                        <el-row v-if="have_msg">
                            <el-carousel :interval="4000" class="lunbo" height="35" direction="vertical">
                                <el-carousel-item style="cursor: pointer;" @click.native="msgVClick(v.content)"
                                    v-for="(v, i) in msg_list" :key="i">
                                    <span style="overflow: hidden;">{{ v.content.length > 20 ? v.content.substr(0, 17) +
                                        "..." :
                                        v.content }}</span>
                                </el-carousel-item>
                            </el-carousel>

                        </el-row>
                        <div v-else>
                            暂无消息
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;height: 30vh;" shadow="always">
                        <div slot="header">
                            <span>公示栏</span>
                        </div>
                        <el-row v-if="have_comp">
                            <div style="height: 25vh; overflow-y: scroll;overflow-x: hidden;">
                                <div v-for="(v, i) in comp_list" :key="i" style="cursor: pointer;margin-bottom: 5px;">
                                    {{ v.submitterName }}--{{ v.projectName }} -- 审核通过
                                </div>
                            </div>


                        </el-row>
                        <div v-else>
                            暂无消息
                        </div>
                    </el-card>

                </el-main>
            </el-col>
        </el-row>


        <!-- 思想品德提交申请 -->
        <el-dialog title="思想品德加分" :visible.sync="iamV" width="600px" append-to-body>
            <el-form ref="iamForm" :model="iamForm" label-width="100px">

                <el-form-item label="学年" prop="stuYearId">
                    <el-select style="width: 400px;" v-model="iamForm.stuYearId" placeholder="请选择学年">
                        <el-option v-for="(v, i) in stu_year_list" :key="i" :value="v.id"
                            :label="v.stuYearName"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="加分项" prop="childType">
                    <el-select style="width: 400px;" v-model="iamChildType" placeholder="请选择加分项">
                        <el-option v-for="(v, i) in child_list" :key="i" :value="v.ruleId" :label="v.ruleName"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分值" prop="description">
                    <el-input style="width: 400px;" v-model="iam_add_record" type="number" disabled placeholder="请输入内容" />
                </el-form-item>

                <el-form-item label="佐证材料" prop="material">
                    <image-upload v-model="iamForm.material" />
                </el-form-item>

                <el-form-item label="备注" prop="description">
                    <el-input v-model="iamForm.description" type="textarea" placeholder="请输入内容" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer%">
                <el-button type="primary" @click="submitIamForm">确 定</el-button>
                <el-button @click="cancelIam" fit="contain">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="消息" :visible.sync="msgV" width="30%">
            <span>{{ msg_content }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="msgV = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
import * as echarts from "echarts";

import store from "@/store";
import { listEnableYear as listYear } from "@/api/stuCQS/basedata/year";
import { listIamChild } from "@/api/stuCQS/basedata/cphRules";
import { stuAdd } from "@/api/stuCQS/info-fill/iam";
import { listMsg } from "@/api/stuCQS/process-center/msg";
import { getCompleted } from "@/api/stuCQS/process-center/auditDetails";
import { getOwn } from "@/api/stuCQS/info-fill/cqScore";
import { isEmpty } from "@/api/helpFunc";
import { getOwnUnTodoCount } from "@/api/stuCQS/basedata/teacher";
import { fdyCountUnAudit, xwCountUnAudit ,jwcCountUnAudit } from "@/api/stuCQS/good/audit";



export default {
    name: "index-default",
    data() {
        return {

            xData: [], //横坐标
            yData: [], //数据
            myChartStyle: { float: "left", width: "95%", height: "95%", margin: 0 },//图表样式



            //判断是否是学生
            isStu: false,
            //思想品德表单
            iamForm: {},
            //学年列表
            stu_year_list: [],
            //选择的加分项
            iamChildType: null,
            //加分项列表
            child_list: [],
            //加分分值
            iam_add_record: 0,
            //思想品德视图
            iamV: false,

            act: [


                {
                    src: require("@/assets/icons/index-icon/Icon-Add.png"),
                    url: "",
                    text: "加分审核",
                    type: 2
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Study.png"),
                    url: "",
                    text: "课程学习",
                    type: 3
                }, {
                    src: require("@/assets/icons/index-icon/Icon-Second class.png"),
                    url: "",
                    text: "第二课堂",
                    type: 4
                }, {
                    src: require("@/assets/icons/index-icon/Icon-Activity.png"),
                    url: "",
                    text: "体能测试",
                    type: 5,
                }, {
                    src: require("@/assets/icons/index-icon/Icon-appraise.png"),
                    url: "",
                    text: "综合评价",
                    type: 6
                }, {
                    src: require("@/assets/icons/index-icon/Icon-Sipin.png"),
                    url: "",
                    text: "思想品德",
                    type: 1
                },
            ],

            fast: [{
                src: require("@/assets/icons/index-icon/Icon-Folder.png"),
                url: "",
                text: "操作手册",
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Arrow.png"),
                url: "",
                text: "我的申请"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Info.png"),
                url: "",
                text: "我的待办"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Clock.png"),
                url: "",
                text: "综合素质"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Send.png"),
                url: "",
                text: "我的流程"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Chart.png"),
                url: "",
                text: "优秀班级"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Home.png"),
                url: "",
                text: "优秀宿舍"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Menu.png"),
                url: "",
                text: "已办任务"
            },
            ],

            msg_list: [],
            have_msg: false,
            msg_content: "",
            msgV: false,

            comp_list: [],
            have_comp: false,
            comp_msg: "",
            compV: false,

            is_jwc: false,

            is_fdy: false,

        }
    },
    created() {
        this.listMyMsg();
        this.getCompleted();
        this.isStu = false;


    },
    mounted() {
        let temp = store.getters.roles;
        temp.map(x => {
            if (x == "teststu") {
                this.getStuYear();
                this.listIamChild();
                this.isStu = true;
                this.initEcharts();
                this.initEcharts2();
                this.act = [
                    {
                        src: require("@/assets/icons/index-icon/Icon-Add.png"),
                        url: "",
                        text: "思想品德加分项",
                        type: 2
                    },
                    {
                        src: require("@/assets/icons/index-icon/Icon-Study.png"),
                        url: "",
                        text: "课程学习",
                        type: 3
                    }, {
                        src: require("@/assets/icons/index-icon/Icon-Second class.png"),
                        url: "",
                        text: "第二课堂",
                        type: 4
                    }, {
                        src: require("@/assets/icons/index-icon/Icon-Activity.png"),
                        url: "",
                        text: "体能测试",
                        type: 5,
                    }, {
                        src: require("@/assets/icons/index-icon/Icon-appraise.png"),
                        url: "",
                        text: "综合评价",
                        type: 6
                    }, {
                        src: require("@/assets/icons/index-icon/Icon-Sipin.png"),
                        url: "",
                        text: "思想品德",
                        type: 1
                    },
                ];

            }

            if (x == "test") {
                this.is_jwc = true;
                this.jwcCountUnAudit();
            }
            if (x == "testteacher") {
                this.is_fdy = true;
                this.getOwnUnTodoCount();
                this.fdyCountUnAudit();
            }

            if(x=="stumanger"){
                this.xwCountUnAudit();
            }

        });

    },
    watch: {
        "iamChildType"(newVal, oldVal) {
            this.child_list.map((v) => {
                if (v.ruleId == newVal) {
                    this.iam_add_record = v.maxScore
                }
            });
        },
    },
    methods: {

        async jwcCountUnAudit(){
            let res = await jwcCountUnAudit();
            if (res.code == 200) {
                let data = res.data;
                if (!isEmpty(data)) {
                    let count_audit = data.count_audit;
                    if (count_audit > 0) {
                        this.$confirm(`作为学工负责人，您有 ${count_audit} 条评优评先申请待处理, 是否前往处理?`, '提示', {
                            confirmButtonText: '现在就去',
                            cancelButtonText: '再等等',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/good/about-good/jwc")
                        }).catch(() => {

                        });
                    }
                }
            }
        },

        async xwCountUnAudit() {
            let res = await xwCountUnAudit();
            if (res.code == 200) {
                let data = res.data;
                if (!isEmpty(data)) {
                    let count_audit = data.count_audit;
                    if (count_audit > 0) {
                        this.$confirm(`作为学务，您有 ${count_audit} 条评优评先申请待处理, 是否前往处理?`, '提示', {
                            confirmButtonText: '现在就去',
                            cancelButtonText: '再等等',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/good/about-good/xw")
                        }).catch(() => {

                        });
                    }
                }
            }
        },

        async fdyCountUnAudit() {
            let res = await fdyCountUnAudit();
            if (res.code == 200) {
                let data = res.data;
                if (!isEmpty(data)) {
                    let count_audit = data.count_audit;
                    if (count_audit > 0) {
                        this.$confirm(`作为辅导员，您有 ${count_audit} 条评优评先申请待处理, 是否前往处理?`, '提示', {
                            confirmButtonText: '现在就去',
                            cancelButtonText: '再等等',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/good/about-good/fdy")
                        }).catch(() => {

                        });
                    }
                }
            }
        },

        async getOwnUnTodoCount() {
            let res = await getOwnUnTodoCount();
            if (res.code == 200) {
                let data = res.data;
                if (!isEmpty(data[0])) {
                    let un = data[0].count_todo;
                    if (un != 0) {
                        this.$confirm(`您有${un}条加分申请待处理, 是否前往处理?`, '提示', {
                            confirmButtonText: '现在就去',
                            cancelButtonText: '再等等',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/stuCQS/process/TODoList")
                        }).catch(() => {

                        });
                    }
                }
            }
        },

        async initEcharts() {

            let res = await getOwn();
            if (res.code == 200) {
                let data = res.data;
                let xData = [];
                let yData = [];
                data.map(x => {
                    xData.push(x.stuYearName);
                    yData.push(x.totalScore)
                });

                // 基本柱状图
                const option = {
                    xAxis: {
                        data: xData,
                        axisLabel: {
                            fontSize: 6 //设置坐标轴文本标签的字体大小
                        },
                        axisLine: {
                            lineStyle: {
                                fontSize: 6 //设置坐标轴轴线的字体大小
                            }
                        }
                    },
                    yAxis: {},
                    series: [
                        {
                            type: "bar", //形状为柱状图
                            data: yData,
                            barWidth: '20%',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }
                    ],
                    tooltip: {
                        show: true,
                        // 自定义鼠标悬浮时的显示内容
                        formatter: function (params) {
                            return '分数: ' + params.value;
                        }
                    }
                };
                const myChart = echarts.init(document.getElementById("mychart1"));
                myChart.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            }
        },
        async initEcharts2() {
            let res = await getOwn();
            if (res.code == 200) {
                let data = res.data;
                let lookData = [];
                data.map(x => {
                    let temp = {
                        value: [x.iamScore, x.classtwoScore, x.ceScore, x.stuScore, x.sportScore],
                        name: x.stuYearName
                    }
                    lookData.push(temp);
                });

                let option = {
                    title: {
                        text: ''
                    },
                    legend: {
                        data: ['', '']
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: '思想品德', max: 100 },
                            { name: '第二课堂', max: 100 },
                            { name: '综合评价', max: 100 },
                            { name: '科学文化素质', max: 100 },
                            { name: '体能测试', max: 100 }
                        ]
                    },
                    series: [
                        {
                            name: '对比',
                            type: 'radar',
                            data: lookData
                        }
                    ],
                    tooltip: {
                        show: true,
                        // 自定义鼠标悬浮时的显示内容
                        formatter: function (params) {
                            return '分数: ' + params.value;
                        }
                    }
                };

                const myChart = echarts.init(document.getElementById("mychart2"));
                myChart.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });

            }




        },





        async getCompleted() {
            let res = await getCompleted();
            if (res.rows.length > 0) {
                this.have_comp = true;
                this.comp_list = [...res.rows];
            }
        },

        msgVClick(v) {

            this.msg_content = v;
            this.msgV = true;
        },

        //列出我的消息
        async listMyMsg() {
            let res = await listMsg();
            if (res.rows.length > 0) {
                this.have_msg = true;
                this.msg_list = [...res.rows];
            }
        },


        /** 提交思想品德 */
        submitIamForm() {
            if (isEmpty(this.iamForm.material)) {
                this.$message.info('请上传佐证材料');
                return;
            }
            if (isEmpty(this.iamChildType)) {
                this.$message.info('请选择加分项');
                return;
            }
            if (isEmpty(this.iamForm.description)) {
                this.$message.info("请填写备注");
                return;
            }
            this.$refs["iamForm"].validate(valid => {
                if (valid) {
                    let sdata = {
                        stuYearId: this.iamForm.stuYearId,
                        material: this.iamForm.material,
                        description: this.iamForm.description,
                        ruleId: this.iamChildType,
                    }
                    stuAdd(sdata).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.$router.push("/stuCQS/process/myApplication");  //新增成功跳转到我的申请页面
                        this.iamV = false;
                    });
                }

            });
        },
        cancelIam() {
            this.iamV = false;
            this.reset();
        },
        reset() {
            this.resetForm("iamForm");
        },
        //列出思想品德子类
        async listIamChild() {
            this.child_list = [];
            let res = await listIamChild();
            let temp = [...res.data];
            temp.map(x => {
                if (x.maxScore >= 0) {
                    this.child_list.push(x);
                }
            })
        },
        //列出学年信息
        async getStuYear() {
            let res = await listYear();
            this.stu_year_list = [...res.rows];
            this.iamForm.stuYearId = res.rows[0].id;

        },

        goTarget(href) {
            window.open(href, "_blank");
        },
        getBackColor(i) {
            let color = this.colors[i % 7];
            return {
                "background-color": color
            };

        },
        toMethod(v) {
            this.reset();
            if (this.isStu) {
                let type = v.type;
                switch (type) {
                    case 1:
                        this.iamV = true;
                        break;
                    case 2:
                        this.$router.push("/stuCQS/process/myApplication")
                        break;
                    case 3:
                    case 4:
                    case 5:
                    case 6:
                        this.$router.push("/stuCQS/index");
                        break;

                }
            } else if (this.is_jwc) {
                let type = v.type;
                switch (type) {
                    case 1:
                        this.$router.push("/stuCQS/infofill/three/iam")
                        break;
                    case 2:
                        this.$router.push("/stuCQS/process/TODoList")
                        break;
                    case 3:
                        this.$router.push("/stuCQS/infofill/course")
                        break;
                    case 4:
                        this.$router.push("/stuCQS/infofill/three/classtwo")
                        break;
                    case 5:
                        this.$router.push("/stuCQS/infofill/sport")
                        break;
                    case 6:
                        this.$router.push("/stuCQS/infofill/three/ce")
                        break;
                }
            } else if (this.is_fdy) {
                let type = v.type;

                console.log(type);
                switch (type) {
                    case 1:
                        this.$router.push("/stuCQS/class-score/three/iam");
                        break;
                    case 2:
                        this.$router.push('/stuCQS/process/TODoList');
                        break;
                    case 3:
                        this.$router.push("/stuCQS/class-score/course");
                        break;
                    case 4:
                        this.$router.push("/stuCQS/class-score/three/class-two");
                        break;
                    case 5:
                        this.$router.push("/stuCQS/class-score/sport");
                        break;
                    case 6:
                        this.$router.push("/stuCQS/class-score/three/ce");
                        break;
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.six-action-to:hover,
.fast-act:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.six-action-to,
.fast-act {
    transition: 200ms ease;
}


div::-webkit-scrollbar {
    width: 4px;
}

div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(blue, 60%);
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(blue, 30%);
}


.lunbo {
    padding: 0 8px 0 0;
    box-sizing: border-box;
    text-overflow: ellipsis; //超出内容...展示
    word-break: keep-all; //是否折断文本，keep-all表示不折断
    white-space: nowrap; //不换行展示文本
    overflow: hidden; //超出部分隐藏，与text-overflow配合使用
    flex: 1; //这个是跟左侧的图片组成的一个flex布局
}

.arrow {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(108, 108, 108);
    position: relative;
    top: 50px;
}


#main {
    background-color: rgb(250, 254, 255);
    padding: 10px 0 10px 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;


}

.el-card__header {
    border: none;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-main {
    color: #333;
    margin: 0;

    .box-card {
        margin: 0 auto;
    }

    .six-action {
        height: 40vh;
    }

    .act-img {
        width: 4.75rem;
        height: 4.625rem;
        position: relative;
        top: 10px;
        display: inline-block;
    }

    .act-text {
        display: inline-block;
        font-size: 1.4375rem;
        height: 50px;
        float: right;
        position: relative;
        right: 30px;
        top: 28px;
    }
}
</style>
